import Taro, {Component,Config} from "@tarojs/taro";
import {View, Image, Text, RichText} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime, partOf, subtime} from '../../utils/common'

import './index.less'
import banner_03 from '../../assets/img/banner_03.jpg'

// 公益-公益活动详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Success extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {},
    activity:[], //其他慈善活动列表
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'活动详情' })
    let id = parseInt(this.$router.params.id)
    this.getActivitiesInfo(id)
    this.getPagedActivitiesInfo()
  }

  config: Config = {
    navigationBarTitleText: '活动详情'
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 获取活动详情
  getActivitiesInfo(id:number) {
    let {PublicWelfareStore} = this.props.stores
    PublicWelfareStore.getActivitiesInfo({
      formId: id,
      callback: res => {
        this.setState({ info: toJS(res) })
      }
    })
  }

  // 获取其他活动列表
  getPagedActivitiesInfo() {
    let { PublicWelfareStore }  = this.props.stores
    PublicWelfareStore.getPagedActivitiesInfo({
      pageIndex:1,
      pageSize:6,
      callback: res => {
        let resArr = toJS(res.items)
        // 去除该条信息
        resArr&&resArr.map((item,index) => {
          if(item.id === parseInt(this.$router.params.id)){
            resArr.splice(index,1)
          }
        })
        this.setState({
          activity: resArr
        })
      }
    })
  }

  render() {
    let { activity,info } = this.state
    console.log(info)
    console.log(activity)
    return (
      <View className='welfare-activity-detail'>
        <Image src={banner_03} className='header-pic' />

        <View className='activity-detail'>
          <View className='list-title'>
            {info.title}
          </View>
          <View className='list-info'>{subtime(info.creationTime)}</View>
        <View className='welfare-article rich-text'>
          <RichText nodes={info.content} />
        </View>
        </View>
        <View className='interval' />
        {activity.length > 0 &&
        <View>
           <View className='column-title content-30'>
              <Text className='column-name'>其他慈善活动</Text>
           </View>
           <View className='list-17'>
             {
               activity.map(item => {
                 return (
                   <View className='list-17-item'
                         key={item.id}
                         onClick={this.handelRouter.bind(this, '/pages/public_welfare/activity_detail?id=' + item.id)}>
                     <Image className='img' src={item.logoImg}/>
                     <View className='info'>
                       <View className='list-title'>{item.title}</View>
                       <View className='list-desc'>{partOf(item.introduce, 50)}</View>
                     </View>
                   </View>
                 )
               })
             }
           </View>
        </View>
        }
      </View>
    )
  }
}

export default Success
